<template>
	<view class="main">
		<view class="banner">
			<u-swiper :list="banner" height="750" mode="rect" indicator-pos="bottomLeft" border-radius="0"
				@click="handimg"></u-swiper>
		</view>
		<view class="name_share">
			<view class="name">
				<view class="li">
					<text>名称：</text>
					<view>{{info.title}}</view>
				</view>
				<view class="li">
					<text>型号：</text>
					<view>{{info.desc}}</view>
				</view>
			</view>
			<button open-type="share" class="share">
				<u-icon name="share"></u-icon>分享
			</button>
		</view>
		<view class="u-content">
			<u-parse :html="info.content"></u-parse>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				id: '',
				info: '',
				banner: []
			}
		},
		onLoad(option) {
			this.id = option.id
			uni.setNavigationBarTitle({
				title: option.title
			})
			this.handinfo()
		},
		methods: {
			handimg(e) {
				let that = this
				console.log(e)
				uni.previewImage({
					current: e,
					urls: that.banner2,
				});
			},
			onShareAppMessage(res) {
				if (res.from === 'button') { // 来自页面内分享按钮
					console.log(res.target)
				}
				return {
					title: this.info.title,
					path: 'pages/info/info?id=' + this.id,
					// imageUrl: this.info.image
				}
			},
			handinfo() {
				global.$http.request({
					url: '/api/good/good_det',
					data: {
						id: this.id
					}
				}).then(res => {
					this.info = res.data.data
					this.banner = res.data.data.copy_image.split(',');
					this.banner2 = res.data.data.image.split(',');
				})
			},
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #fff;

		.main {
			width: 750rpx;
			display: flex;
			flex-direction: column;
			align-items: center;

			.banner {
				width: 750rpx;
				height: 750rpx;
			}

			.name_share {
				width: 690rpx;
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				margin: 30rpx 0;

				.name {
					display: flex;
					flex-direction: column;
					font-size: 36rpx;
					color: #333333;
					line-height: 65rpx;

					.li {
						width: 620rpx;
						display: flex;

						text {
							color: #999999;
							flex-shrink: 0;
						}
					}



				}

				.share {
					display: flex;
					flex-direction: column;
					align-items: center;
					font-size: 28rpx;
					color: #999;

					.u-icon {
						font-size: 42rpx;
						margin-bottom: 10rpx;
					}
				}
			}

			.u-content {
				width: 750rpx;
			}
		}
	}
</style>